define(function (require, exports, module) {
    'use strict';
    var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        notify = require('js/utils/notify'),
        models = require('js/apps/report/models'),
        utils = require('js/utils/tools'),
        chart = require('js/utils/chart'),
        moment = require('moment'),
        app = Backbone.history;

    var Overview = Backbone.View.extend({
        tagName: "div",
        initialize: function (options) {
            this.options = options;
            this.user = new models.UserOverview();
            this.cost = new models.CostOverview();
            this.recharge_interval = new models.RechargeInterval();
            this.yesterday_recharge = new models.RechargeInterval();
            this.history3_recharge = new models.RechargeInterval();
            this.history7_recharge = new models.RechargeInterval();

            this.user.bind('change reset', this.renderWithData, this);
            this.cost.bind('change reset', this.renderWithData, this);
            this.recharge_interval.bind('change reset', this.renderWithData, this);
            this.yesterday_recharge.bind('change reset', this.renderWithData, this);
            this.history3_recharge.bind('change reset', this.renderWithData, this);
            this.history7_recharge.bind('change reset', this.renderWithData, this);
        },
        render: function () {
            this.$el.html("");
            $(window).scrollTop(0);
            return this;
        },
        renderWithData: function () {
            this.$el.html(this.template({
                user: this.user.toJSON(),
                cost: this.cost.toJSON(),
            }));
            var that = this;
            var x = _.pluck(this.recharge_interval.list, 'end'),
                recharge_user = _.pluck(this.recharge_interval.list, 'recharge_user'),
                recharge_price = _.pluck(this.recharge_interval.list, 'recharge_price'),
                delta_price = _.pluck(this.recharge_interval.list, 'delta_price'),
                yesterday_recharge_price = _.pluck(this.yesterday_recharge.list, 'recharge_price'),
                yesterday_delta_price = _.pluck(this.yesterday_recharge.list, 'delta_price'),
                history3_recharge_price = _.pluck(this.history3_recharge.list, 'recharge_price'),
                history3_delta_price = _.pluck(this.history3_recharge.list, 'delta_price'),
                history7_recharge_price = _.pluck(this.history7_recharge.list, 'recharge_price'),
                history7_delta_price = _.pluck(this.history7_recharge.list, 'delta_price');
            $('#chart_recharge').highcharts({
                chart: {
                    //type: 'column'
                    zoomType: 'xy'
                },
                title: {
                    text: '今日流水走势'
                },
                xAxis: [{
                    categories: x,
                    crosshair: true
                }],
                yAxis: [{ //流水
                    labels: {
                        style: {
                            color: 'blue',
                        }
                    },
                    title: {
                        text: '付费金额',
                        style: {
                            color: 'blue'
                        }
                    },
                }, { //人数
                    title: {
                        text: '付费人数',
                    },

                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '今日付费金额',
                    data: recharge_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                }, {
                    name: '最近七天付费金额',
                    data: history7_recharge_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                }, {
                    name: '最近三天付费金额',
                    data: history3_recharge_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                }, {
                    name: '昨日付费金额',
                    data: yesterday_recharge_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                }, {
                    name: '人数',
                    data: recharge_user,
                    yAxis: 1,
                    tooltip: {
                        pointFormat: '<br/>{series.name}: <b>{point.y: .2f}</b>'
                    },
                }]
            });
            $('#chart_interval').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: '分段流水'
                },
                xAxis: [{
                    categories: x,
                    crosshair: true
                }],
                yAxis: [{ //流水
                    labels: {
                        style: {
                            color: 'blue',
                        }
                    },
                    title: {
                        text: '付费金额',
                        style: {
                            color: 'blue'
                        }
                    },
                }],
                tooltip: {
                    shared: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '今日数值',
                    data: delta_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                },{
                    name: '昨日数值',
                    data: yesterday_delta_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                },{
                    name: '最近七天平均数值',
                    data: history7_delta_price,
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.y: .2f}</b>'
                    }
                }]
            });
            return this;
        },
        load: function () {
            this.user.fetch({
                reset: true,
                error: function (c, r, o) {
                    notify.notifyResp(r);
                },
            });
            this.cost.fetch({
                reset: true,
                error: function (c, r, o) {
                    notify.notifyResp(r);
                },
            });
            this.recharge_interval.fetch({
                reset: true,
                data: {
                    date_range: this.options.dateRange.join(','),
                },
                error: function (c, r, o) {
                    notify.notifyResp(r);
                }
            });
            this.yesterday_recharge.fetch({
                reset: true,
                data: {
                    date_range: this.options.yesterdayRange.join(','),
                },
                error: function (c, r, o) {
                    notify.notifyResp(r);
                }
            });
            this.history3_recharge.fetch({
                reset: true,
                data: {
                    date_range: this.options.history3Range.join(','),
                },
                error: function (c, r, o) {
                    notify.notifyResp(r);
                }
            });
            this.history7_recharge.fetch({
                reset: true,
                data: {
                    date_range: this.options.history7Range.join(','),
                },
                error: function (c, r, o) {
                    notify.notifyResp(r);
                }
            });
        },
    });
    exports.List = Backbone.View.extend({
        el: "#content_wrapper",
        template: "report/Overview.html",
        initialize: function (options) {
            this.options = options;
        },
        render: function () {
            var today = moment().format('YYYY-MM-DD'),
                history7_start = moment().subtract(7, 'days').format('YYYY-MM-DD'),
                history3_start = moment().subtract(3, 'days').format('YYYY-MM-DD'),
                yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD'),
                dateRange = [today, today],
                yesterdayRange = [yesterday, yesterday],
                history3Range = [history3_start, yesterday],
                history7Range = [history7_start, yesterday];
            this.options.dateRange = dateRange;
            this.options.yesterdayRange = yesterdayRange;
            this.options.history3Range = history3Range;
            this.options.history7Range = history7Range;
            var view = new Overview(this.options);
            view.template = this.template;

            this.$el.empty();
            this.$el.append(view.render().el);
            view.load();

            return this;
        }
    });

});
